<template>
	<view class="uni-date">
		<view class="popText" @click="open">{{curDatetime?curDatetime:'请选择日期'}}</view>
		<uni-popup ref="popup" type="bottom" background-color="rgba(0,0,0,0)">
			<view class="poup-box">
				<view class="popTit">选择日期</view>
				<view class="dateBox">
					<Calendar ref="calendar" :date="curDate" :start-date="nowDate" @change="changeDate" />
				</view>
				<view class="timeBox">
					<view class="timeTit">请选择时间段看房</view>
					<view class="timeSlot">
						<view class="li" :class="curTimeIndex==i?'active':'', item.peopleNum===0?'disabled':''" v-for="(item,i) in timeSlot" @click="changeTime(item,i)" :key="i">
							<view class="time">{{item.label}}</view>
							<view class="num" v-if="item.peopleNum">剩余{{item.peopleNum}}人</view>
							<view class="num" v-else-if="item.peopleNum===0">预约已满</view>
							<view class="num" v-else>不限</view>
						</view>
					</view>
				</view>
				<view class="btnBox row">
					<view class="btn fill" @click="cancel">取消</view>
					<view class="btn sure fill" @click="handleSure">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script lang="ts" setup>
import { ref,onMounted,computed } from 'vue'
import Calendar from './calendar.vue'
import { reserveQuantity } from '@/common/API/room'
import dayjs  from "dayjs"
import { getDictData } from '@/common/API/system'
const emit = defineEmits(['changeDatetime'])
const nowDate = ref()
const props = defineProps({
	apartmentId: {
		type: String,
		default: () => ''
	}
})

const timeSlot = computed(() => {
	let arr = []
	timeDictData.value.forEach((item)=>{
		arr.unshift(item)
	})
	if (curDate.value) {
	    let newArr = []
	    let _reserveDate = curDate.value
	    let _nowDate = dayjs().format('YYYY-MM-DD')
	    let isToday = _reserveDate == _nowDate
	    if (isToday) {
			let hm = Number(JSON.stringify(dayjs().hour()) + '.' + JSON.stringify(dayjs().minute()))
			arr.forEach((item) => {
				const [a, b] = [item.label.split('-')[0], item.label.split('-')[1]]
				if (Number(b.replace(':', '.')) > hm) {
					newArr.push(item)
				}
			})
			arr = newArr
	    }
	}
	return arr
})

onMounted(() => {
	// 如果今天已超过16：30 就默认选择明天
	let hm = Number(JSON.stringify(dayjs().hour()) + '.' + JSON.stringify(dayjs().minute()))
	let maxTime = '16:30'
	if (Number(maxTime.replace(':', '.')) > hm) {
		nowDate.value = dayjs(dayjs(new Date()).format('YYYY-MM-DD 00:00:00')).valueOf()
		curDate.value = dayjs(new Date()).format('YYYY-MM-DD')
		console.log(dayjs(new Date()).valueOf())
	}else{
		console.log(2)
		nowDate.value = dayjs().add(0,'day')
		curDate.value = dayjs().add(1,'day').format('YYYY-MM-DD')
	}
	// 获取时间段配置
	getTimeSlot()
})

const popup = ref()
const open = ()=>{
	getQuantity()
	popup.value.open()
}

const getQuantity = ()=>{
	let data = {
		reserveDate: new Date(curDate.value).getTime(),
		apartmentId: props.apartmentId
	}
	reserveQuantity(data).then((res)=>{
		timeSlot.value.forEach((item)=>{
			item.peopleNum = res[item.value]
		})
	})
}

const timeDictData = ref([])
const getTimeSlot = async ()=>{
	let res = await getDictData({
		pageNo: 1,
		pageSize: 20,
		dictType: 'reserve_time_period'
	})
	timeDictData.value = res.list
}

const curDate = ref()
const changeDate = (e)=>{
	curDate.value = e.fulldate
	getQuantity()
}

const curTimeIndex = ref()
const curDatetime = ref()
const changeTime = (item,i)=>{
	if(item.peopleNum===0){
		return false
	}
	curTimeIndex.value = i
}

const cancel = ()=>{
	popup.value.close()
}

const handleSure = ()=>{
	if(!curDate.value){
		uni.showToast({
			title: '请选择日期',
			icon: 'none'
		})
	}else if(!curTimeIndex.value&&curTimeIndex.value!=0){
		uni.showToast({
			title: '请选择时间段',
			icon: 'none'
		})
	} else {
		let curItem = timeSlot.value[curTimeIndex.value]
		curDatetime.value = `${curDate.value} ${curItem.label}`
		popup.value.close()
		emit('changeDatetime',{
			date: curDate.value,
			time: curItem.label,
			timeKey: curItem.value
		})
	}
}
</script>

<style lang="scss">
.poup-box{
	background: #fff;
	padding: 0 0 30rpx;
	.popTit{
		text-align: center;
		font-size: 32rpx;
		line-height: 48rpx;
		padding: 20rpx 0;
	}
	.dateBox{
		width: 686rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}
	.timeBox{
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		width: 686rpx;
		margin: 20rpx auto 0;
		text-align: left;
		.timeTit{
			font-size: 29rpx;
			line-height: 38rpx;
			padding: 20rpx 20rpx 10rpx;
		}
		.timeSlot{
			display: flex;
			flex-wrap: wrap;
			.li{
				border-radius: 8rpx;
				border: 2rpx solid #999;
				margin: 0 0 24rpx;
				padding: 10rpx 0;
				flex: 0 0 32%;
				text-align: center;
				&:nth-child(3n+2){
					margin: 0 2% 24rpx;
				}
				.time,.num{
					line-height: 36rpx;
				}
				&.active{
					background: $uni-color-primary;
					border-color: $uni-color-primary;
					.time,.num{
						color: #fff;
					}
				}
				&.disabled{
					background: none;
					border-color: #ccc;
					.time,.num{
						color: #ccc;
					}
				}
			}
		}
	}
	.btnBox {
		width: 686rpx;
		margin: 40rpx auto 0;
		.btn {
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background: #eee;
			font-size: 30rpx;
			border-radius: 68rpx;
			&.sure {
				background-color: $uni-color-primary;
				color: #fff;
				margin-left: 40rpx;
			}
		}
	}
}
</style>
